import React from "react";
import {StyleSheet, Text, View} from "react-native";
import {ScreenDimensions} from "../../libs/utils/ScreenDimensions";


type ChatUnReadProp = {
    style?:any,
    unread?:number
}

type ChatUnReadState = {

}

export default class ChatUnRead extends React.Component<ChatUnReadProp, ChatUnReadState> {
    constructor(props:ChatUnReadProp) {
        super(props);
    }


    render() {
        let styleWidthHeight:any = {};
        if(!this.props.unread){
            styleWidthHeight = {width:0,height:0};
        }
        else if(this.props.unread.toString().length === 1){
            styleWidthHeight = {width:18,height:18};
        }
        else {
            styleWidthHeight = {width:22,height:18};
        }
        return (
            <View style={[styles.dotImageCenter,styleWidthHeight,this.props.style !== undefined ? this.props.style : {}]}>
                <Text style={[styles.unreadText]}>{this.props.unread}</Text>
            </View>
        );
    }
}

let styles = StyleSheet.create({
    dotImageCenter:{
        width: 18,
        height: 18,
        borderRadius:9,
        backgroundColor:ScreenDimensions.themeColor,
        justifyContent:'center',
        alignItems:'center',
    },
    unreadText:{
        color:'#ffffff',
        fontSize:10,
        // borderWidth:1
    }
});
